<!DOCTYPE html>
<html lang="en">

<head>
    <title>顶部菜单栏</title>
    <style>
        body {
            min-width: 750px;
        }

        /* 以下五项为顶部菜单的通用设置 */
        #header {
            position: fixed;
            top: 0px;
            left: 0px;
            background-color: black;
            width: 100%;
            height: 65px;
            color: white;
            text-align: center;
            font-size: 5mm;
        }

        #header div {
            float: left;
            height: 35px;
            margin-left: 25px;
            line-height: 35px;
        }

        #header input {
            line-height: 25px;
            font-size: 5mm;
        }

        #header_div_nav li div:hover,
        #header button:hover,
        #header_div_menu span:hover {
            color: teal;
            cursor: pointer;
        }

        #header button {
            background-color: black;
            color: white;
            font-size: 5mm;
        }

        /* 当页面宽度足够大时，集成菜单不显示 */
        #header_div_nav,
        #header_div_menu ul {
            list-style: none;
        }

        /* 下面是基层菜单的格式设置 */
        #header_div_nav li div {
            margin-left: 5px;
            width: 100px;
            text-align: center;
            font-size: 6mm;
        }

        #header_div_menu {
            position: absolute;
            right: 50px;
        }

        #header_div_menu span {
            display: inline-block;
            height: 150px;
        }

        #header_div_menu li {
            position: relative;
            left: 47px;

        }

        #header_div_menu li div {
            background-color: black;
            width: 55px;

        }

        /* 给顶部集成菜单按钮的子项添加上小手 */
        #header_div_menu li div:hover {
            color: teal;
            cursor: pointer;
        }

        /* 调整顶部集成按钮的子项的位置 */
        #header_div_menu li:first-child {
            margin-top: 50px;
        }

        /* 遮蔽层 */
        .overlay {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 102;

        }

        /* 登陆窗口 */
        #header_popupwindow_login {
            border: 2px black solid;
            width: 320px;
            height: 120px;
            text-align: center;
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -160px;
            font-size: 6mm;
            background: black;
            color: white;
            z-index: 103;

        }

        /* 注册窗口 */
        #header_popupwindow_regist {
            border: 2px black solid;
            width: 320px;
            height: 240px;
            font-size: 6mm;
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -160px;
            background: black;
            color: white;
            z-index: 103;

        }

        /*弹出窗口的表格格式*/
        .popwin {
            margin: 10px auto;
            text-align: center;
        }

        /* 调整弹出窗口的表格的行间距 */
        .popwin td {
            padding-top: 10px;
        }

        /* 调整集成菜单按钮的子项的位置 */
        .top_vertical_play {
            position: relative;
            top: 50%;
            margin-top: -17px;
        }

        /* 绑定操作，当鼠标移动到集成菜单按钮时，显示子菜单 */
        .top_menu:hover .top_menu_item {
            display: block;
        }

        /* 隐藏顶部集成菜单的子项 */
        .top_menu_item {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 顶部菜单栏的div -->
    <div id="header">
        <div id="header_div_tittle">
            <h3>跳蚤市场</h3>
        </div>
        <!-- 商品类型按钮 -->
        <ul id="header_div_nav" v-show="isShowTopMenu">
            <li v-for="(item, index) in menuItem" :key="index">
                <div @click="toSearch(item.name,item.kind)">{{item.name}}</div>
            </li>
        </ul>
        <!--搜索框-->
        <div id="header_div_reach" :class="{top_vertical_play:!isShowTopMenu}">
            <table>
                <tr>
                    <td>
                        <input type="text" id="input_reach" v-model="key">
                    </td>
                    <td> <button @click="toSearch('',0)">搜索</button></td>
                </tr>
            </table>
        </div>
        <!-- 登陆和注册按钮 -->
        <div class="header_div_regin" v-show="isShowTopMenu&!isShowLoginAndRegist">
            <table>
                <tr>
                    <td>
                        <button @click="showWindow(1)">登陆</button>
                    </td>
                    <td>
                        <button @click="showWindow(2)">注册</button>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 个人主页按钮 -->
        <div class="header_div_home" v-show="isShowTopMenu&isShowLoginAndRegist">
            <table>
                <tr>
                    <td>
                        <button @click="toHome()">个人主页</button>
                    </td>
                    <td>
                        <button @click="shutdowm()">注销</button>
                    </td>
                </tr>

            </table>
        </div>
        <!-- 集成菜单按钮 -->
        <div id="header_div_menu" v-show="!isShowTopMenu" class="top_vertical_play top_menu">
            <span>菜单</span>
            <div id="header_div_menu_context" class="top_menu_item">
                <ul>
                    <li v-for="(item, index) in menuItem" :key="index" class="top_menu_item">
                        <div @click="toSearch(item.name,item.kind)">{{item.name}}</div>
                    </li>
                    <li>
                        <div @click='showWindow(1)' v-show="!isShowLoginAndRegist">登陆</div>
                    </li>
                    <li>
                        <div @click='showWindow(2)' v-show="!isShowLoginAndRegist">注册</div>
                    </li>
                    <li>
                        <div @click="shutdowm()" v-show="isShowLoginAndRegist">注销</div>
                    </li>
                    <li>
                        <div @click="toHome()" v-show="isShowLoginAndRegist">主页</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 弹出窗口的div -->
    <div id="pop">
        <!-- 登陆窗口 -->
        <div id="header_popupwindow_login" v-show="toShowLoginWindow">
            <table>
                <tr>
                    <td><label for="useraccount">用户账号：</label></td>
                    <td><input type="text" id="useraccount" v-model="login.user"></td>
                </tr>
                <tr>
                    <td><label for="userpassword">用户密码：</label></td>
                    <td><input type="text" id="userpassword" v-model="login.password"></td>
                </tr>
            </table>
            <button @click="close()">取消</button>
            <button @click="login_function()">确认</button>

        </div>
        <!-- 注册窗口 -->
        <div id="header_popupwindow_regist" v-show="toShowRegistWindow">
            <table class="popwin">
                <tr>
                    <td><label for="regist_number">手机号码：</label></td>
                    <td><input type="number" id="regist_number" v-model="regist.number"></td>
                </tr>
                <tr>
                    <td><label for="regist_name">名称：</label></td>
                    <td><input type="text" id="regist_name" v-model="regist.name"></td>
                </tr>
                <tr>
                    <td><label for="regist_password">密码：</label></td>
                    <td><input type="password" id="regist_password" v-model="regist.password"></td>
                </tr>
                <tr>
                    <td><label for="regist_password_again">确认密码：</label></td>
                    <td><input type="password" id="regist_password_again" v-model="regist.password_again"></td>
                </tr>
                <tr>
                    <td>
                        <button @click="close()">取消</button>
                    </td>
                    <td>
                        <button id="regist_yes" @click="regist_function()">注册</button>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 遮蔽层 -->
        <div class="overlay" v-show="isShowPopWindow" @click="close()">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入cookie功能的js  -->
    <script src="./cookie_function.js"></script>
    <script>
        // 顶部菜单栏的vue对象
        let header = new Vue({
            el: "#header",
            created() {
                this.clientWidth = document.body.clientWidth;
                if (this.clientWidth >= this.needWidth) {
                    this.isShowTopMenu = true
                } else {
                    this.isShowTopMenu = false
                }
            },
            data: {
                isShowTopMenu: false,
                menuItem: [{ name: "首页", kind: 101 },
                { name: "手机", kind: 1 },
                { name: "电脑", kind: 2 },
                { name: "平板", kind: 3 },
                { name: "服饰", kind: 4 }
                ],
                clientWidth: document.body.clientWidth,
                needWidth: 1150,
                // 搜索关键字
                key: "",
                // 是否显示个人主页
                isShowLoginAndRegist: false

            },
            mounted() {
                this.watchWidth()
            },
            methods: {
                watchWidth() {
                    window.onresize = () => {
                        return (() => {
                            window.screenWidth = window.innerWidth
                            this.clientWidth = window.screenWidth
                        })()
                    }
                },
                showWindow(val) {
                    pop.isShowPopWindow = true;
                    if (val == 1) {
                        pop.isShowLoginWindow = true;
                    } else if (val == 2) {
                        pop.isShowLoginWindow = false;
                    }
                },
                toSearch(key, kind) {
                    // kind=0表示是全类型搜索  
                    if(kind==0){
                        key=this.key
                    }  
                    window.location='search.html?key='+key+'&kind='+kind;
                },
                // 返回个人主页
                toHome(){
                    if(get_cookie('user_id').length>0)
                        window.location='user_info.html';
                    else{
                        this.check_login();
                    }
                },
                check_login() {
                    if (get_cookie('user_id').length > 0) {
                        this.isShowLoginAndRegist = true;
                    }else{
                        this.isShowLoginAndRegist=false;
                    }
                },
                // 注销登陆
                shutdowm(){
                    set_cookie('user_id','')
                    this.check_login()
                }
            },
            watch: {
                clientWidth(val) {

                    if (val >= this.needWidth) {
                        this.isShowTopMenu = true
                    } else {
                        this.isShowTopMenu = false
                    }
                },
                isShowTopMenu() {
                    console.log("当前页面宽度变化达到阈值，改变顶部栏的样式。");
                }
            }

        })
        // 弹出窗口的vue对象
        let pop = new Vue({
            el: "#pop",
            data: {
                isShowPopWindow: false,
                isShowLoginWindow: false,
                // 注册对象
                regist: {
                    name: "",
                    number: 110,
                    email: "电子邮箱（非必需）",
                    password: "用户密码",
                    password_again: "再次输入",
                    readme: "自述"
                },
                // 登陆对象
                login: {
                    user: "",
                    password: ""
                }
            },
            computed: {
                toShowLoginWindow() {
                    return this.isShowPopWindow && this.isShowLoginWindow
                },
                toShowRegistWindow() {
                    return this.isShowPopWindow && !this.isShowLoginWindow
                }
            },
            methods: {
                close() {
                    this.isShowPopWindow = false
                },
                regist_function() {
                    if (this.regist.name.length <= 0) {
                        alert("用户名称必填！")
                    } else if (this.regist.password.length <= 0 || this.regist.password_again != this.regist.password) {
                        alert("用户密码不能为空，且必须填两次。")
                    } else {
                        // 往后台写数据
                        console.log("用户：" + this.regist.name + ", 尝试注册！");
                        set_cookie('user_id', 001)
                        header.check_login();
                        this.close()
                    }
                    this.regist.name=""
                    this.regist.password="";
                    this.regist.password_again=""
                    this.regist.number=""
                    this.regist.email="";
                },
                login_function() {
                    if (this.login.user.length <= 0 || this.login.password.length <= 0) {
                        alert("用户名和密码不能为空！")
                    } else {
                        // 访问后台查询书记
                        console.log("用户:" + this.login.user + ",尝试登陆!");
                        set_cookie('user_id', 001)
                        header.check_login();
                        this.close()
                    }
                    this.login.user="";
                    this.login.password=""
                },
                toSearch(key, kind) {
                    if (kind == 0) {
                        this.$router.push({
                            name: "./search.html",
                            query: {
                                key: key,
                                kind: kind
                            }
                        })
                    }
                }
            }
        })
        header.check_login();
    </script>
</body>

</html>